import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './ReplyRow.css';
import Link from '../Link';
import moment from 'moment';
import { Panel } from 'react-bootstrap';
import markdown from '../../server/common/markdown';

class ReplyRow extends React.Component {

  static propTypes = {
    index: PropTypes.number.isRequired,
    item: PropTypes.object.isRequired,
  };

  _title(item) {
    return (
      <div>
        <strong><a className={s.author}>{ item && item.author ? item.author.loginname : 'unkonown'}</a></strong>
        <span className={s.time}>{moment(item.create_at).fromNow()}</span>
      </div>
    );
  }

  render() {
    const { item } = this.props;
    return (
      <Panel header={this._title(item)}>
        <div dangerouslySetInnerHTML={{ __html: markdown(item.content) }} />
      </Panel>
    );
  }
}

export default withStyles(s)(ReplyRow);
